<template>
    <el-row style="height: 10vh; text-align: center; font-family: electronicFont;">
        <el-col :span="8">
            <el-statistic title="注册人数" :value="outputValue1" />
        </el-col>
        <el-col :span="8">
            <el-statistic title="在线人数" :value="outputValue3" />
        </el-col>
        <el-col :span="8">
            <el-statistic title="今日访问量" :value="outputValue2" />
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="14" style="height: 100%;width: 100%;">
            <div class="block text-center" style="border:1px solid #ebebeb;">
                <el-carousel height="55vh">
                    <el-carousel-item v-for="item in images" :key="item">
                        <img :src="item" style="width: 100%;height: 100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-col>
        <el-col :span="10" style="margin-left: 0%;">
            <div style="font-size: 20px;font-weight: bold;text-align: center">公&nbsp;&nbsp;告</div>
            <el-timeline style="margin-top: 10px;width: 80%;margin-left: 10%;">
                <el-timeline-item timestamp="2018/4/12" placement="top">
                    <el-card>
                        <h4>商品更新公告</h4>
                        <p>Tom committed 2018/4/12 20:46</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top">
                    <el-card>
                        <h4>系统维护公告</h4>
                        <p>Tom committed 2018/4/3 20:46</p>
                    </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top">
                    <el-card>
                        <h4>系统更新公告</h4>
                        <p>Tom committed 2018/4/3 20:46</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-col>
    </el-row>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'

const images = ref([
    require('../assets/images/main1.jpg'),
    require('../assets/images/main3.jpg'),
    require('../assets/images/main4.jpg'),
    require('../assets/images/main2.jpg'),
    require('../assets/images/main5.jpg'),
])
const source1 = ref(0)
const outputValue1 = useTransition(source1, {
    duration: 1500,
})
source1.value = 172000
const source2 = ref(0)
const outputValue2 = useTransition(source2, {
    duration: 1500,
})
source2.value = 152000
const source3 = ref(0)
const outputValue3 = useTransition(source3, {
    duration: 1500,
})
source3.value = 2000



</script>

<style scoped>
@font-face {
    font-family: electronicFont;
    src: url(../assets/font/DS-DIGIT.TTF);
}

.el-statistic {
    --el-statistic-content-font-size: 36px;
}
</style>